<template>
	<div class="list-wrap main-wrap">
		<!-- 一级分类 -->
		<CategoryOne />
		<!-- 二级分类 -->
		<div class="aside-menu">
			<div
				class="menu-item"
				:class="{ on: index == activeInd }"
				v-for="(item, index) in typeList"
				:key="item.type"
				@click="handleClick(index)"
			>
				{{ item.type }}
			</div>
		</div>
		<!-- 楼层数据 -->
		<!-- ref设置属性便于获取dom结构 -->
		<div class="main-list" ref="listbox">
			<div class="type-item" v-for="item in typeList" :key="item.type">
				<h2 class="tit">{{ item.type }}</h2>
				<!-- 产品列表组件 -->
				<GoodsList :proList="item.list" />
			</div>
		</div>
	</div>
</template>
<script>
import CategoryOne from "@/components/CategoryOne.vue";
import GoodsList from "@/components/goods/GoodsList.vue";
// 导入请求列表函数
import { getGoodList } from "@/api";
export default {
	name: "ListPage",
	data() {
		return {
			goodsList: [],
			activeInd: 0, //当前默认被触发的二级分类索引
			scrollNum: 0, //滚动次数，以此数据做滚动限流
		};
	},
	computed: {
		// 处理数据
		typeList() {
			// 新数据结构
			let typeArr = [];
			// console.log(this.goodsList);
			let { goodsList } = this;
			// 遍历数据列表
			for (let i = 0; i < goodsList.length; i++) {
				// 新数组有没有当前产品的分类
				let hasType = false;
				// 有分类向对应分类的list内添加数据
				// 循环新数据查看分类是否存在
				for (let j = 0; j < typeArr.length; j++) {
					if (goodsList[i].type_two == typeArr[j].type) {
						//标记存在
						hasType = true;
						// 当前产品添加到新数据存在的分类列表下
						typeArr[j].list.push(goodsList[i]);
						// 找到分类后，终止对新数组循环
						break;
					}
				}
				// 如果循环完,没有相应分类，执行添加新分类结构
				if (!hasType) {
					let obj = {
						type: goodsList[i].type_two,
						list: [goodsList[i]],
					};
					// 添加一个带分类的列表结构
					typeArr.push(obj);
				}
			}
			// 导出生成的数据结果
			// console.log(typeArr);
			return typeArr;
		},
	},
	components: {
		CategoryOne,
		GoodsList,
	},
	created() {
		// 第一次调用数据
		// console.log(this.$route.params.type_one);
		this.getPro(this.$route.params.type_one);
	},
	// 路由更新守卫
	beforeRouteUpdate(to, from, next) {
		// console.log(from);
		// console.log(to.params.type);
		// 数据请求
		this.getPro(to.params.type_one);
		// ...
		next();
	},
	mounted() {
		// 在页面加载后添加滚动监听
		this.bindScroll();
	},
	destroyed() {
		// 在页面销毁时移除滚动监听
		this.removeScroll();
	},
	// <keep-alive> 可触发生命周期activated/deactivated
	// activated() {
	// 	// 在页面激活时添加滚动监听
	// 	this.bindScroll();
	// },
	// deactivated() {
	// 	// 在页面失活时移除滚动监听
	// 	this.removeScroll();
	// },

	methods: {
		// 请求数据的方法
		async getPro(type_one) {
			let response = await getGoodList({ type_one: type_one });
			// console.log(response);
			// 数据清空
			this.goodsList = [];
			// 加载新分类
			this.goodsList.push(...response);
		},
		// 点击二级分类，滚动页面
		handleClick(i) {
			// 修改触发索引x
			this.activeInd = i;
			// 拿到结构列表
			let typeBoxs = this.$refs.listbox.children;
			// console.log(typeBoxs[i]);
			let ofTop = typeBoxs[i].offsetTop - 60;
			// console.log(ofTop);
			// 窗口滚动到相应位置;
			window.scrollTo({
				top: ofTop,
				behavior: "smooth", //行为，缓动
			});
		},
		// 绑定滚动监听
		bindScroll() {
			window.addEventListener("scroll", this.scrollFn);
		},
		// 移除滚动监听
		removeScroll() {
			window.removeEventListener("scroll", this.scrollFn);
		},
		// 监听程序
		scrollFn() {
			// 限流
			this.scrollNum++;
			if (this.scrollNum < 10) {
				return; //不操作后续
			}
			this.scrollNum = 0; //重置

			// console.log("滚动啦");
			// 滚动距离
			let sTop = document.documentElement.scrollTop || document.body.scrollTop;
			sTop = parseInt(sTop);
			// console.log(sTop);
			// 每个分类项距离头部的距离与滚动距离的位置对比
			let typeBoxs = this.$refs.listbox.children;
			// console.log(typeBoxs);
			for (let i = typeBoxs.length - 1; i >= 0; i--) {
				// 每个模块距离头部长度
				let boxOfTop = typeBoxs[i].offsetTop;
				// console.log(boxOfTop);
				// boxOfTop-sTop 如果距离差小于60,出发新的索引项
				// console.log(boxOfTop);
				// console.log(sTop);
				// console.log(boxOfTop - sTop);
				if (boxOfTop - sTop < 70) {
					this.activeInd = i;
					// 找到应该触发的索引后需终止循环
					break;
				}
			}
		},
	},
};
</script>
<style scoped lang="scss">
@import "@/assets/scss/color";
.aside-menu {
	background: #fff;
	border: 2px #eee solid;
	position: fixed;
	left: 20px;
	top: 200px;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	width: 120px;
	max-height: 520px;
	overflow: auto;
	border-radius: 4px;
	div {
		border-bottom: 1px dashed #f4f4f4;
		cursor: pointer;
		&:hover,
		&.on {
			background: $mainColor;
			color: #fff;
		}
		&:last-child {
			border-bottom: none;
		}
	}
}
.main-list {
	.type-item {
		.tit {
			text-align: center;
			background: #eee;
			line-height: 60px;
			font-size: 30px;
			margin-bottom: 20px;
		}
	}
}
</style>
